<template>
  <view class="main-box">
    <view class="my-date">
      <view class="my-date-input" style="padding-left:30rpx" @click="change">
        <u-image
          width="40rpx"
          height="40rpx"
          bgColor="red"
          src="../../../static/images/dateTimeChecked.png"
        ></u-image>
        <view style="margin-left: 32rpx; color: #2b4fa3">
          {{ valueTime }}
        </view>
      </view>
    </view>
    <view class="u-page__item">
      <u-image
        v-if="viewList.length === 0"
        style="margin-top: 120rpx;"
        width="100%"
        height="520rpx"
        src="../../../static/images/nodata.png"
      ></u-image>
      <view class="box my-uni-form" v-else>
        <view v-for="(viewItem, index) in viewList" :key="index">
          <view class="my-title-box">
            <view class="my-title-item-box">
              <view style="display: flex; align-items: center">
                <text class="title" style="margin-left: 32rpx">
                  {{ viewItem }}
                </text>
              </view>
            </view>
            <view
              class="callape-btn"
              @click="isShowClick(index, viewItem.checked)"
              >汇总</view
            >
          </view>
        </view>
      </view>
    </view>
    <u-datetime-picker
      :show="timeShow"
      @cancel="timeCancel"
      @confirm="timeConfirm"
      v-model="value"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>
<script>
import { getSummaryListData } from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      valueTime: '',
      timeShow: false,
      value: moment(new Date()).format('YYYY-MM-DD'),
      viewList: [], // 保存消息列表
    }
  },
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
    })
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
  }),
  onShow() {
    getSummaryListData(
      this.valueTime
        ? {
            createDate: this.valueTime,
          }
        : null
    ).then((res) => {
      this.viewList = res.data
    })
  },
  mounted() {},
  methods: {
    change() {
      this.timeShow = true
    },
    timeCancel() {
      this.timeShow = false
    },
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
    timeConfirm(e) {
      this.valueTime = this.changeTimeDate(e.value)
      this.timeShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
.u-page__item .box {
  margin-bottom: 32rpx;
}
.u-page__item__title__slot-title {
  height: 80rpx;
  line-height: 80rpx;
}
.u-page__item_daily {
  background: #f8f8f8;
  border: 1rpx solid #d1d7df;
  box-shadow: 0px 2rpx 8rpx 0px #d0d6df;
  border-radius: 1rpx;
  padding: 30rpx;
}
.view_img {
  display: flex;
  flex-wrap: wrap;
  // justify-content: center;
  .view_img_item {
    margin: 10rpx 4px 0rpx 4rpx;
  }
}
.message_icon {
  width: 20rpx;
  height: 20rpx;
  background: #2b4fa3;
  border-radius: 50%;
  display: inline-block;
  margin-right: 22rpx;
}
.u-page {
  padding: 0;

  &__item {
    padding: 0 30rpx;
    &__title {
      background-color: $u-bg-color;
      padding: 15px;
      font-size: 15px;
      &__slot-title {
        font-size: 14px;
      }
    }
  }
}
.imgDetails {
  display: flex;
  flex-wrap: wrap;
}
.u-collapse-content {
  color: $u-tips-color;
  font-size: 14px;
}
.my-date {
  position: relative;
  display: flex;
  margin: 17rpx 32rpx;
  height: 59rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
}
.title {
  font-size: 30rpx;
  color: #606c81;
  margin-left: 32rpx;
}
.main-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  .my-title-box {
    height: 98rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #d6dfec;
  }
  .my-title-item-box {
    font-weight: bold;
    display: flex;
    color: #606c81;
    align-items: center;
  }
  .textDetails {
    margin: 20rpx 0rpx 32rpx 0rpx;
    height: 24rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #606c81;
    line-height: 30rpx;
  }
}
.topImg {
  width: 100%;
}
.containerBody {
  position: relative;
  flex: 1;
  margin: -60rpx 24rpx 24rpx 24rpx;
  box-sizing: border-box;
  border: 2rpx solid #ddd;
  z-index: 2;
  border-radius: 20rpx;
  background: #fff;
}
.bottomImg {
  height: 126rpx;
  border-radius: 10rpx;
  position: absolute;
  bottom: -6rpx;
  width: 100%;
}
</style>
